<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="./css/element-ui.css">
  <link rel="stylesheet" href="https://unpkg.com/mint-ui/lib/style.css">
  <link rel="stylesheet" href="./css/product.css">
  <link rel="stylesheet" href="./css/font-awesome.min.css">
  <title>Document</title>

</head>
<body>
  <div id="product">
    <el-container>
      <el-header>Header</el-header>
      <el-main>
        <div class="block">
          <mt-swipe :auto="4000">
            <mt-swipe-item v-for="swe in spwipers">
              <img :src="swe.src" alt="">
            </mt-swipe-item>
          </mt-swipe>
        </div>
        <div class="pro-title">THE PUBLIC ORGANIC 无硅油洗发水桉树柑橘香型涛涛涛涛涛涛涛涛涛涛涛涛涛涛涛涛涛涛涛涛</div>
        <div class="pro-price">$347</div>
        <div class="pro-card">
          <div class="pro-car-header">
            <h3>商品描述</h3>
          </div>
          <div class="pro-car-body">
            商品描述商品描述商品描述商品描述商品描述商品描述
          </div>
        </div>
        <div class="pro-card">
          <div class="pro-car-header">
            <h3>使用方法</h3>
          </div>
          <div class="pro-car-body">
            使用方法使用方法使用方法使用方法使用方法使用方法使用方法
          </div>
        </div>
        <div class="pro-card">
          <div class="pro-car-header">
            <h3>商品图片</h3>
          </div>
          <div class="pro-car-body">
            <img src="./images/goods/logo.png" alt="">
          </div>
        </div>
      </el-main>
      <el-footer>
        <el-row :gutter="10">
          <el-col :span="4">
            <i class="fa fa-home fa-2x"></i>
            <div>首页</div>
          </el-col>
          <el-col :span="4">
            <i class="fa fa-phone fa-2x"></i>
            <div>客服</div>
          </el-col>
          <el-col :span="4">
            <i class="fa fa-shopping-cart fa-2x"></i>
            <div>购物车</div>
          </el-col>
          <el-col :span="12" class="pro-last-col">
            <el-button class="pro-dialog-btn" @click="dialogVisible = true">加入购物车</el-button>
          </el-col>
          <el-dialog
            :visible.sync="dialogVisible"
            width="100%"
            show-close="false">
            <div slot="title">
              <div class="pro-dia-img">
                <img src="./images/goods/logo.png">
              </div>
              <span class="pro-dia-price">$656</span>
            </div>
            <div class="pro-dia-body">
              <el-row :gutter="10">
                <el-col :span="4">规格</el-col>
                <el-col :span="20" class="pro-dia-span">
                  <el-radio v-model="ProSize" label="1" border size="mini">桉树柑橘香型护发素 500ml</el-radio>
                  <el-radio v-model="ProSize" label="2" border size="mini"> 200ml</el-radio>
                  <el-radio v-model="ProSize" label="3" border size="mini">
                    <span class="pro-span-name">
                      桉树柑橘香型护发素400mlbybybybyubyubyuuuuuuuuuuuubyuuyuybubbbbuyb
                    </span>
                  </el-radio>
                  <el-radio v-model="ProSize" label="4" border size="mini">薰衣草香型护发素 500ml</el-radio>
                  <el-radio v-model="ProSize" disable label="5" border size="mini">薰衣草香型护发素 400ml</el-radio>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="6">数量</el-col>
                <el-col :span="6">
                  <el-button type="primary" size="mini" @click="AddOne" icon="el-icon-plus"></el-button>
                </el-col>
                <el-col :span="4">
                  <el-input v-model="num" size="mini" @keyup.native="FixNumber" class="pro-dia-number"></el-input>
                </el-col>
                <el-col :span="6">
                  <el-button type="primary" size="mini" @click="CutOne" icon="el-icon-minus"></el-button>
                </el-col>
                <!-- {{num}} -->
              </el-row>
            </div>
            <span slot="footer" class="dialog-footer">
              <!-- <el-button @click="dialogVisible = false">取 消</el-button> -->
              <el-button type="primary" @click="dialogVisible = false" class="pro-add-btn">加入购物车</el-button>
            </span>
          </el-dialog>
        </el-row>
      </el-footer>
    </el-container>
  </div>
</body>
  <script src="./js/vue.min.js"></script>
  <script src="./js/element-ui.js"></script>
  <script src="https://unpkg.com/mint-ui/lib/index.js"></script>
  <script type="text/javascript">
    var max = 100;
    var min = 1;
    new Vue({
      el: "#product",
      data() {
        return {
          spwipers: [
            {
              id:0,
              src: "./images/goods/goods1.jpg"
            },
            {
              id:2,
              src: "./images/goods/goods2.jpg"
            },
            {
              id:3,
              src: "./images/goods/goods3.jpg"
            }
          ],
          dialogVisible: false,
          ProSize: "",
          num: 1
        }
      },
      methods: {
        AddOne:function(){
          if (this.num < max) {
            this.num++;
          }
        },
        FixNumber:function(){
          console.log("keyup");
          console.log(max);
          console.log(min);
          let fix;
          if (typeof this.num == 'string') {
            fix = Number(this.num.replace(/\D/g, ''));
          } else {
            fix = this.num;
          }
          if (fix > max || fix < min) {
            fix = max;
          }
          this.num = fix;
        },
        CutOne:function() {
          if (this.num > min) {
            this.num--;
          }
        },
        number: function() {
          console.log("change");
        }
    },
    mounted: function() {

    }
    })
  </script>
</html>
